$shadow-colors: 'primary', 'secondary', 'danger', 'warning', 'info', 'success',
  'purple', 'blue', 'red', 'orange', 'yellow', 'green', 'github', 'invision',
  'facebook', 'amazon', 'twitter', 'angular', 'linkedin';

:root {
  --base-shadow: rgba(0, 0, 0, 0.12);
  --light-box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
  --light-box-shadow-md: -1px 3px 10px 0 rgba(0, 0, 0, 0.12);

  @each $color in $shadow-colors {
    --#{$color}-shadow-from: hsla(
      var(--#{$color}-h),
      var(--#{$color}-s),
      var(--#{$color}-l),
      0.42
    );
    --#{$color}-shadow-to: hsla(
      var(--#{$color}-h),
      var(--#{$color}-s),
      var(--#{$color}-l),
      0.2
    );
    --#{$color}-box-shadow: 0 14px 26px -12px var(--#{$color}-shadow-from),
      0 4px 23px 0 var(--base-shadow),
      0 8px 10px -5px var(--#{$color}-shadow-to) !important;
  }
}
